<template>
  <div>
    <h1>用户学习统计</h1>
    <div v-if="loading">加载中...</div>
    <div v-if="stats">
      <p>用户名: {{ stats.username }}</p>
      <p>总词汇数: {{ stats.total_words }}</p>
      <p>已学词汇数: {{ stats.learned_words }}</p>
      <p>未学词汇数: {{ stats.unlearned_words }}</p>
      <p>学习进度: {{ stats.learning_progress }}</p>
    </div>
    <p v-if="error" style="color: red;">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getUserStats } from '../../api/authService.js';  // 导入 getUserStats 函数

const stats = ref(null);   // 用于存储学习统计信息
const error = ref(null);   // 用于存储错误信息

// 获取存储在 localStorage 中的用户 ID
const userId = localStorage.getItem('userId');

// 获取用户学习统计信息的函数
const fetchStats = async () => {
  if (!userId) {
    error.value = '用户 ID 丢失，请先登录';
    return;
  }

  const result = await getUserStats(userId); // 调用 getUserStats

  if (result.success) {
    stats.value = result.stats;  // 更新学习统计信息
  } else {
    error.value = result.message;  // 显示错误信息
  }
};

// 使用 onMounted 生命周期钩子在组件加载时调用 fetchStats
onMounted(() => {
  fetchStats();
});
</script>

<style scoped>
div {
  margin: 20px;
  font-size: 18px;
}

p {
  margin: 10px 0;
}

h1 {
  font-size: 24px;
}

span {
  color: green;
}
</style>
